<template>
  <div class="page" @scroll='scroll' v-if="info">
    <header :class="{bg:showBg}">
      <i class="iconfont icon-fanhui" @click="$router.back()"></i>
      <span>{{ info.name }}</span>
    </header>
    <div class="head_img">
      <img :src="info.picUrl" alt="" />
      <div class="cover"></div>
      <div class="collect">
        <i class="iconfont icon-tianjia"></i>
        <span>收藏</span>
      </div>
    </div>
    <!-- 歌曲列表信息 -->
    <music-list :data='musicList' :count='0'/>
  </div>
</template>
<script setup>
import {getCurrentInstance,ref} from 'vue'
import {useRoute} from 'vue-router'
import MusicList from '@/components/common/music-list.vue'
let {proxy} = getCurrentInstance()
let route=useRoute()
let info=ref(null) 
let musicList=ref(null)
let showBg=ref(false)
function scroll(){
  showBg.value=document.querySelector('.page').scrollTop>250?true:false
}
proxy.$showLoading()
proxy.$api.home.getSingerList({id:route.params.id}).then(res=>{
  info.value=res.artist
  musicList.value=res.hotSongs
  proxy.$hideLoading()
})
</script>

<style lang="less" scoped>
.bg{
  background: @theme-color;
}
//背景遮罩层
.cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: rgba(7, 17, 27, 0.3);
}
//头部
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;

  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 5px;
  color: @font-color-light;
  i {
    font-size: 20px;
  }
  span {
    margin-left: 5px;
    font-size: 16px;
  }
}
//头像
.head_img {
  position: fixed;
  img {
    width: 100%;
  }
  .collect{
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: @theme-color;
    border-radius: 20px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    color: @font-color-light;
    font-size: 16px;
    letter-spacing: 5px;
  }
}
.bottom{
  position: absolute;
  left: 0;right: 0;
  top: 300px;
}
</style>
